<template>
  <div class="com-container">
    <div class="com-chart" ref="mapRef"></div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'RadarChart',
  data() {
    return {
      // 图表的实例对象
      chartInstance: null,
      // 从服务器获取的数据
      medicareData: [],
    }
  },
  computed: {
    ...mapState(['theme']),
  },
  watch: {
    theme() {
      // 销毁当前的图表
      this.chartInstance.dispose()
      // 以最新主题初始化图表对象
      this.initChart()
      // 屏幕适配
      this.screenAdapter()
      // 渲染数据
      this.updateChart()
    },
  },
  created() {
    // 获取数据
    this.getMedicareData()
  },
  mounted() {
    this.initChart()
    window.addEventListener('resize', this.screenAdapter)
    this.screenAdapter()
  },
  destroyed() {
    window.removeEventListener('resize', this.screenAdapter)
  },
  methods: {
    // 初始化图表的方法
    async initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.mapRef, this.theme)

      // 初始化配置项
      const initOption = {
        title: {
          text: '▎医保缴纳总额',
          left: '20',
          top: '20',
        },
        radar: {
          // 雷达图坐标轴
          indicator: [
            { name: '2010年', max: 35000000 },
            { name: '2012年', max: 35000000 },
            { name: '2014年', max: 35000000 },
            { name: '2016年', max: 35000000 },
            { name: '2018年', max: 35000000 },
            { name: '2020年', max: 35000000 }
          ],
          // 设置雷达图区域背景颜色
          splitArea: {
            show: true,
            areaStyle: {
              color: [
                '#BFEFFF',  // 亮蓝色
                '#87CEFA',  // 天蓝色
                '#4682B4',  // 钢蓝色
                '#1E90FF',  // 道奇蓝
                '#4169E1',  // 皇家蓝
                '#0000FF',  // 标准蓝色
              ],
            },
          },
        },
         tooltip: {
        trigger: 'item'
      },
        series: [
          {
            name: '医保缴纳数据',
            type: 'radar',
            data: [
              {
                value: [],
                name: '医保缴纳数据',
                areaStyle: {
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 1, [
                    { offset: 0, color: '#FFA500' }, 
                    { offset: 1, color: '#FF4500' }, 
                  ])
                },
                itemStyle: {
                  color: '#FF6347', 
                }
              },
            ],
          },
        ],
      }

      // 设置图表配置
      this.chartInstance.setOption(initOption)
    },

    // 获取医保缴纳数据
    async getMedicareData() {
      const { data: res } = await this.$http.get('/get_medicare_contribution_data')
      this.medicareData = res

      // 处理数据，提取年份和数据值
      const radarData = this.medicareData.map(item => {
        return Number(item[1])  // 取出数值
      })

      // 更新图表
      this.updateChart(radarData)
    },

    // 更新图表配置项
    updateChart(radarData) {
      const dataOption = {
        series: [
          {
            data: [
              {
                value: radarData,
                name: '医保缴纳数据(单位:元)',
                areaStyle: {
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 1, [
                    { offset: 0, color: '#FFA500' }, 
                    { offset: 1, color: '#FF4500' }, 
                  ])
                },
                itemStyle: {
                  color: '#FF6347', 
                }
              },
            ],
          },
        ],
      }
      this.chartInstance.setOption(dataOption)
    },

    // 响应式适配
    screenAdapter() {
      // 设置响应式字体大小
      const titleFontSize = (this.$refs.mapRef.offsetWidth / 100) * 3.6

      // 响应式的配置项
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize,
          },
        },
        radar: {
          indicator: [
            { name: '2010年', max: 35000000 },
            { name: '2012年', max: 35000000 },
            { name: '2014年', max: 35000000 },
            { name: '2016年', max: 35000000 },
            { name: '2018年', max: 35000000 },
            { name: '2020年', max: 35000000 }
          ],
          splitArea: {
            show: true,
            areaStyle: {
              color: [
                '#BFEFFF',  // 亮蓝色
                '#87CEFA',  // 天蓝色
                '#4682B4',  // 钢蓝色
                '#1E90FF',  // 道奇蓝
                '#4169E1',  // 皇家蓝
                '#0000FF',  // 标准蓝色
              ],
            },
          },
        },
      }

      this.chartInstance.setOption(adapterOption)
      this.chartInstance.resize()
    },
  },
}
</script>

<style lang="less" scoped></style>
